<template>
    <section class="todoapp">
		<!-- 3.使用组件 -->
		<!-- 驼峰命名的组件，在使用时可以转换为横杠分隔的方式，例如： -->
		<!-- MvcTop ==> mvc-top -->
		<mvc-top @content="add"></mvc-top>
		<!-- 因为todoList是一个引用类型（复杂类型）的数据 -->
		<!-- 所以在传递的时候，传递的是一个引用地址 -->
		<mvc-list :todo-arr="todoList" @complete="toggle" @del="del"></mvc-list>
		<mvc-btm @clear="clear" @screening="screening" :total="sum"></mvc-btm>
	</section>
</template>
<script>
	// 1.拆分组件，并引入
	import MvcTop from "./top.vue";
	import MvcList from "./list.vue";
	import MvcBtm from "./btm.vue";
	export default {
		name:"Home",
		// 2.挂载组件
		components:{ MvcTop,MvcList,MvcBtm },
		// 列表数据我们选择存放在了父组件
		// 原因：方便数据的传递
		data(){
			return {
				allList:[],
				todoList:[],
				status:0,
			}
		},
		created(){
			// 组件创建完成后，读取本地存储
			this.allList = JSON.parse(localStorage.getItem("allList")) || [];
			this.todoList = this.allList;
		},
		// 数据定义在什么地方，那么对数据操作的方法一般就要定义在什么地方
		methods:{
			toggle(item){
				item.completed = !item.completed;
				this.reset();
			},
			add(val){
				// 为了避免吗id的重复，我们优化了算法，使用最大id+1的方式
				if(val.trim()=="") return;
				let maxID = this.allList.reduce((tmp,item) =>  tmp>item.id ? tmp : item.id,1);
				this.allList.push({ id:++maxID, title:val, completed: false });
				this.reset();
			},
			del(id){
				// 删除时根据索引来删除，会有bug？
				// 比如：在进行中列表中删除第二项，但是实际上allList的第二项为已完成状态
				let index = this.allList.findIndex(item=>item.id==id);
				this.allList.splice(index,1);
				this.reset();
			},
			clear(){
				this.allList = this.allList.filter(item=>item.completed==false);
				this.reset();
			},
			screening(index){
				if(index==0){
					this.todoList = this.allList;
				}
				if(index==1){
					this.todoList = this.allList.filter(item=>item.completed==false)
				}
				if(index==2){
					this.todoList = this.allList.filter(item=>item.completed==true)
				}
				this.status = index;
			},
			reset(){
				// 数据的变化驱动视图的变化
				// 前提:视图中得用到这个数据(依赖收集和派发更新)
				this.screening(this.status);
				localStorage.setItem("allList",JSON.stringify(this.allList));
			}
		},
		computed:{
			sum(){
				return this.todoList.length;
			}
		}
	}
</script>

<style>

</style>